import React, { Suspense } from "react";
import { BrowserRouter } from "react-router-dom";
import { Routes } from "react-router-dom";
import { HashRouter } from "react-router-dom";
import { Router } from "react-router-dom";
import { Route } from "react-router-dom";
import { Link } from "react-router-dom";

const App1 = React.lazy(() => import("app1/App"));
const App2 = React.lazy(() => import("app2/App"));

export default function App() {
  return (
    <>
      <HashRouter>
        <h1>Main App</h1>
        <nav>
          <Link to="/app1">App1</Link>
          <Link to="/app2">App2</Link>
          <Routes>
            <Route
              path="/app1"
              element={
                <Suspense fallback={"loading..."}>
                  <App1></App1>
                </Suspense>
              }
            ></Route>
            <Route
              path="/app2"
              element={
                <Suspense fallback={"loading..."}>
                  <App2></App2>
                </Suspense>
              }
            ></Route>
          </Routes>
        </nav>
      </HashRouter>
    </>
  );
}
